<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
       title="购物车" 
       left-arrow
       @click-left="$router.go(-1)">
        <van-icon slot="right" name="weapp-nav"/>
      </van-nav-bar>
    </header>
    <div class="content" >
      <div class="noshop" v-if="showShop">
        <img src="https://gw.alicdn.com/tfs/TB1p.BGQXXXXXbFXFXXXXXXXXXX-160-160.png" alt="">
        <p>你没有选择商品</p>
        <van-button color="#f60" @click="$router.push('/home')">去购物</van-button>
      </div>
      <div class="shop" v-else>
        <!-- 删除数据的按钮 -->
        <van-swipe-cell v-for="( item, index) of cartlist"
          :key="item.proid">
          <!-- 数据内容部分
          -->
          <van-card
            :num="item.num"
            :price="item.price"
            :title="item.proname"
          >
          <div slot="thumb" class="Img">
            <input type="checkbox" v-model="item.flag" @change="selectItem(item.$event)"> 
            <img :src="item.proimg" alt="">
          </div>
          <template #tags>
            <van-tag plain type="danger">{{item.brand}}</van-tag>
          </template>
            <template #footer>
              <van-button size="mini" color="#999" @click="add(item)">+</van-button>
              <van-button size="mini" color="#999" @click="reduce(item)" :disabled="item.num <= 1">-</van-button>
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" 
            @click="Ydelete(item,index)"/>
          </template>
        </van-swipe-cell>
        <!-- 底部 -->
        <van-submit-bar
         :price="allprice * 100" :button-text="'去结算('+ allnum +')'"
          @submit="onSubmit">
          <van-checkbox v-model="allchecked" @click="checkAll">全选</van-checkbox>
        </van-submit-bar>
        </div>
      </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar,Icon,SubmitBar,Checkbox
      ,Card,Button,Tag,SwipeCell,Dialog
      ,Toast } from 'vant'
import { YCart,Yupdate,YdeleteData ,Yorder } from '@/api'

Vue.use(Card)
Vue.use(SwipeCell)
Vue.use(SubmitBar)
Vue.use(Checkbox)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Button)
Vue.use(Checkbox)
Vue.use(Tag)
Vue.use(Dialog)
Vue.use(Toast )
export default {
  data(){
    return {
      allchecked:true,
      cartlist:[],
      num:1,
    } 
  },
  //计算属性
  computed: {
    //是否显示购物车数据
    showShop () {
      return this.cartlist.length === 0
    },
    //计算总价
    //用reduce归并来计算
    allprice () {
      return this.cartlist.reduce((sum, item) => {
        //直接累加
        return item.flag? sum + item.price * item.num: sum + 0
      },0)
    },
    //计算总数量
    allnum () {
      return this.cartlist.reduce((num , item) => {
        return item.flag ? num + item.num : num + 0
      },0)
    }
  },
  //自定义方法
  methods:{
    //全选
    checkAll (event) {
      console.log('a', event)
      this.allchecked = !this.allchecked
      console.log(this.allchecked)
      //遍历上面的商品是否被选中
      console.log(this.cartlist)
      this.cartlist.map(item => {
        //改变所有的商品中的flag值
        item.flag = this.allchecked
      })
    },
    //反选
    selectItem (item, $event) {
     
    },
    //提交订单
    onSubmit(){
      if(this.allnum === 0){
        Toast ('你还没有选择商品')
      }else{
        //获取选中的商品
        const arr = []
        this.cartlist.map(item => {
          if(item.flag){
            arr.push(item)
          }
        })
        Yorder({
          token:localStorage.getItem('token'),
          userid: localStorage.getItem('userid'),
          orderlist: JSON.stringify(arr)
        }).then(res => { 
          console.log(res)
          this.$router.push({name:'order',params:{orderid:res.data.orderid}})
         })
      }
    },
    //添加商品数量
    add (item) {
      // console.log(item)
      Yupdate({
        cartid: item.cartid,
        num: item.num + 1
      }).then(res => {
        // console.log(res)
        if(res.data.code){
          item.num += 1
        }
      })
    },
    //减少商品
    reduce(item){
      Yupdate({
        cartid: item.cartid,
        num: item.num > 1 ? item.num - 1 : 1
      }).then(res => {
        // console.log(res)
        if(res.data.code){
          item.num > 1 ? item.num -= 1 : item.num = 1
        }
      })
    },
    //删除商品
    Ydelete(item,index){
      YdeleteData({
         cartid: item.cartid,
         token:localStorage.getItem('token')
         }).then(res => {
        console.log(res)
        if(res.data.code == '200'){
          Dialog.confirm({
            title: '删除',
            message: '您确定要删除吗',
          }).then(() => {
             this.cartlist.splice(index,1)
            })
            .catch(() => {
            })
          
        }
      })
    }
  },
  mounted (){
    YCart({userid:localStorage.getItem('userid')}).then(res=>{
      this.cartlist = res.data.data
    })
  }
}
</script>
<style lang='scss' scoped>
.noshop{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  p{
    margin: 10px 0;
  }
}
.Img{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  input{
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
  }
  img{
    height: 100%;
    width: 75%;
  }
}
  .delete-button {
    height: 100%;
  }
</style>
